<!--
 * @Author: zhangyun
 * @Date: 2021-04-20 15:32:59
 * @LastEditors: zhangyun
 * @LastEditTime: 2021-04-28 10:44:59
 * @Desc: 
-->
<template>
  <header class="bg-white w-full border-fuchsia-600 border-b" :class="[fixed && 'fixed top-0']">
    <div class="container mx-auto flex items-center justify-between">
      <div class="flex items-center flex-1">
        <h1 class="text-2xl text-blue-600 font-black font-mono h-12 leading-12 cursor-pointer" @click="goHome">
          {{ title }}
        </h1>
        <template v-if="!currentRoute.includes('creator')">
          <nav class="link_content mx-10">
            <Link :data="links" />
          </nav>
          <div class="search mx-4 rounded-full bg-gray-100 border-gray-600">
            <input
              type="text"
              class="w-64 h-8 rounded-full outline-none bg-transparent text-indent-1 text-sm font-extrabold"
              placeholder="搜索"
            />
            <i class="iconfont icon-search-2-copy px-4 text-gray-400"></i>
          </div>
        </template>
        <template v-else>
          <strong class="text-blue-600 ml-4">创作中心</strong>
        </template>
      </div>
      <div class="user flex w-40 items-center justify-between">
        <button
          class="bg-blue-600 text-white w-16 h-7 text-sm leading-7 outline rounded-full active:bg-blue-300 focus:outline-none"
          @click="handleQuestions"
        >
          提问
        </button>
        <div class="w-9 h-9 bg-gray-400 rounded-md" @click="userLogin"></div>
      </div>
    </div>
  </header>
  <Dialog v-model:visible="visible" @close="handleClose">
    <header class="flex">
      <template></template>
      <div class="w-12 h-12 m-2 rounded-md bg-gray-400"></div>
      <input
        class="flex-1 h-10 mt-2 focus:outline-none text-xl"
        placeholder="写下你的问题，准确的描述更容易得到解答！"
        v-model="ideaForm.title"
      />
    </header>
    <section class="border m-3 h-24 rounded-md overflow-hidden" :class="{ show: ideaForm.title }" v-if="ideaForm.title">
      <textarea
        class="focus:outline-none w-full h-full p-2 resize-none"
        type="textarea"
        :rows="6"
        v-model="ideaForm.desc"
      />
    </section>
    <footer class="flex justify-between mx-6 py-3">
      <div>
        <input type="checkbox" v-model="ideaForm.isAnonymousQuestion" value="true" />
        <span class="text-gray-400 text-sm">匿名提问</span>
      </div>
      <button class="px-4 py-1 bg-blue-600 text-white focus:outline-none active:bg-blue-200" @click="submit">
        提交
      </button>
    </footer>
  </Dialog>
  <!-- login -->
  <Dialog v-model:visible="loginVisible" @close="loginVisible = false">
    <div class="flex flex-col p-3">
      <input
        class="h-8 w-64 border focus:outline-none p-2 mb-4"
        type="text"
        v-model="loginForm.user"
        placeholder="用户名"
      />
      <input
        class="h-8 w-64 border focus:outline-none p-2 mb-4"
        type="text"
        v-model="loginForm.pwd"
        placeholder="密码"
      />
      <button class="bg-blue-600 focus:outline-none text-white p-1 w-24" @click="login">登陆</button>
    </div>
  </Dialog>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, watch, getCurrentInstance, PropType } from 'vue'
import { useRouter } from 'vue-router'
import Dialog from './Dialog/index.vue'
import Link from './Link.vue'
import { resetForm } from '@utils'

interface idea {
  title: string
  desc: string
  isAnonymousQuestion: boolean
}

interface login {
  user: string
  pwd: string
}
export default defineComponent({
  name: 'Header',
  props: {
    links: {
      type: Array as PropType<Array<any>>,
      require: true,
      default: () => [],
    },
    fixed: {
      type: Boolean,
      default: false,
    },
  },
  components: { Link, Dialog },
  setup(props, context) {
    const title = ref('CHEHU')
    const visible = ref(false)
    const loginVisible = ref(false)
    const router = useRouter()
    const currentRoute = ref<any>('')
    const ideaForm = reactive<idea>({
      title: '',
      desc: '',
      isAnonymousQuestion: false,
    })
    // 路由监听
    watch(
      () => router.currentRoute,
      (route) => {
        currentRoute.value = route.value.path
      },
      {
        deep: true,
      }
    )
    function handleQuestions() {
      visible.value = true
    }
    function handleClose() {
      visible.value = false
      resetForm(ideaForm)
      console.log('ideaForm', ideaForm)
    }
    function goHome() {
      router.push('/')
    }
    function submit() {
      console.log('idea', ideaForm)
    }
    // login
    const { ctx } = getCurrentInstance() as any
    const loginForm = reactive<login>({
      user: '',
      pwd: '',
    })
    function userLogin() {
      loginVisible.value = true
    }
    async function login() {
      const res = await ctx.$http.get('/api/login', { params: loginForm })
      if (res.statusCode === 200) {
        localStorage.setItem('token', res.data.token)
        localStorage.setItem('user_info', JSON.stringify(res.data.result))
        loginVisible.value = false
      }
    }

    return {
      title,
      handleQuestions,
      visible,
      handleClose,
      currentRoute,
      goHome,
      ideaForm,
      submit,
      loginVisible,
      userLogin,
      login,
      loginForm,
    }
  },
})
</script>

<style lang="scss" scoped>
.show {
  animation: drop-down 0.3s linear;
}
@keyframes drop-down {
  0% {
    height: 0;
  }
  25% {
    height: 1.5rem;
  }
  50% {
    height: 3rem;
  }
  75% {
    height: 4.5rem;
  }
  100% {
    height: 6rem;
  }
}
</style>
